<template>
    <div>
      <div :id="id" class="biao"></div>
    </div>
  </template>

  <script>
  // eslint-disable-next-line no-unused-vars
  import * as echarts from 'echarts'
  export default {
    data () {
      return {
        values: []
      }
    },
    name: 'echart',
    props: {
      items: {
        type: Array,
        default: function () {
          return []
        }
      },
      pieName: { // 图标名
        type: String,
        default: '数据'
      },
      pirRad: {
        type: Array,
        default: function () {
          return []
        }

      },
      titleText: {
        type: String,
        default: '自己看着办'
      },
      titleSub: {
        type: String,
        default: '看着办'
      },
      titleLeft: {
        type: String,
        default: 'left'
      },
      legendShow: {
        type: Boolean,
        default: false
      },
      nameX: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed: {
      id () {
        return 'each' + this._uid
      }
    },
    mounted () {
      this.items.forEach(item => {
        console.log(item)
      })
      const option = {
        title: {
          text: this.titleText,

        },
        tooltip: {
        trigger: 'axis'
      },
        toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.nameX
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 300,
          show: true
        },
        series: [
          { // [150, 230, 224, 218, 135, 147, 260]
            data: this.items,
            type: 'line'
          }
        ]
      }
      const chartObj = echarts.init(document.getElementById(this.id))
      chartObj.setOption(option)
    }

  }
  </script>

  <style scoped>
  .biao{
      width: 900px;
      height: 400px;
  }
  </style>
